<template>
  <div>
    <h2 class="mat-2">
      孙组件
    </h2>
    <p class="mat-2">接收到来自父组件的数据 ~ {{ parentName }}</p>
    <p class="mat-2">$attrs 包含父组件和祖父组件的数据 ~ {{ $attrs }}</p>
    <Button class="mat-2" @click="clickGrandChild">冒泡事件给祖父组件</Button>
  </div>
</template>
<script>
export default {
  inheritAttrs: false,
  props: {
    parentName: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      msg: '来自孙子组件的数据'
    }
  },
  methods: {
    // 点击孙组件
    clickGrandChild () {
      this.$emit('child-click', this.msg)
    }
  }
}
</script>
